<template>
  <div class="echarts" ref="orderCount" id="orderCount" :style="{ width: '800px', height: '400px' }"></div>
  <div ref="warehousing" id="warehousing" :style="{ width: '800px', height: '400px' }"></div>
  <div ref="pickup" id="pickup" :style="{ width: '800px', height: '600px' }"></div>
</template>
<script>
import { orderCount,warehousingCount,pickupCount} from "@/api/echarts";
export default {
  data() {
    return {
      xAxis:[],
      yAxis:[],
      warehousingData:[],
      pickupData:[],
    };
  },
  mounted() {
    // this.drawLine();
    this.queryOrderCount();
    this.queryWarehousingCount();
    this.queryPickupCount();
  },
  methods: {
    queryOrderCount() {
      orderCount().then(res => {
        console.log(res.data.data.xaxis);
        console.log(res.data.data.yaxis);
        this.xAxis = res.data.data.xaxis;
        this.yAxis = res.data.data.yaxis;
        this.drawBar();
      })
    },
    //柱状图
    drawBar() {
      console.log("创建")
      console.log(this.xAxis);
      console.log(this.yAxis);
      const dom = this.$refs['orderCount'];
      const orderCount = this.$echarts.init(dom); // 初始化echarts实例
      const option = {
        title: {
          text: '教材订购数量统计',
          left: 'center'
        },
        tooltip: {},
        legend: {
          data: ['订购数量'],
          top: 'bottom'
        },
        xAxis: {
          data: this.xAxis,
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // rotate: -90, // 设置旋转角度
          },
          // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {},
        series: [
          {
            name: '订购数量',
            type: 'bar',
            barWidth: 75,   //柱状宽度
            data: this.yAxis
            // data: [5, 20, 36, 10, 10, 20, 34, 52, 10, 20, 30, 40]
          }
        ]
      };
      // 设置实例参数
      orderCount.setOption(option);
    },


    queryWarehousingCount() {
      warehousingCount().then(res => {
        console.log(res.data.data);
        this.warehousingData = res.data.data;
        this.drawPie();
      })
    },
    //入库数据饼图
    drawPie(){
      const dom = this.$refs['warehousing'];
      const orderCount = this.$echarts.init(dom); // 初始化echarts实例
      const option = {
        title: {
          text: '到货数量统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '到货数量',
            type: 'pie',
            radius: '50%',
            data: this.warehousingData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 设置实例参数
      orderCount.setOption(option);
    },


    queryPickupCount(){
      pickupCount().then(res => {
        console.log(res.data.data);
        this.pickupData = res.data.data;
        this.drawPie2();
      })
    },
    drawPie2(){
      const dom = this.$refs['pickup'];
      const pickupCount = this.$echarts.init(dom); // 初始化echarts实例
      const option = {
        legend: {
          top: 'bottom'
        },
        title: {
          text: '领取数量统计饼图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '领取数量',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.pickupData
          }
        ]
      };
      // 设置实例参数
      pickupCount.setOption(option);
    }
  }
};
</script>
<style>
.echarts{
  margin-bottom: 20px;
}
</style>